<script lang="ts" setup>
import { useUserInfo } from '@/stores/userInfo'
import { dayjs } from 'element-plus'
import { onActivated, onDeactivated, onMounted, ref } from 'vue'
import { Refresh, Sunrise } from '@element-plus/icons-vue'
import { useAppState } from '@/stores/appState'
import { storeToRefs } from 'pinia'
import request from '@/utils/request'
import { isDevelopment } from '@/utils'

const { userInfos } = useUserInfo()
const { mobile } = storeToRefs(useAppState())

interface QuotationRowType {
  id: number
  content: string
  form: string
  creator: string
}

// 季度
const list = [
  {
    values: [3, 4, 5],
    color: 'success',
    season: '春',
    text: '撷一缕春风，沾两滴春雨，采三片春叶，摘四朵春花，织成五颜六色的祝福，伴着七彩的牵挂。'
  },
  {
    values: [6, 7, 8],
    color: 'danger',
    season: '夏',
    text: '忙碌人生路漫漫，在季节月台边，放飞思念，遥寄祝愿。愿你快乐不止一"夏"、成功不止一"夏"、幸福不止一"夏"。'
  },
  {
    values: [9, 10, 11],
    color: 'warning',
    season: '秋',
    text: '当凉风与秋雨相伴；当黄叶与晨霜相伴；当冷月共霞光一色，当大雁打点南飞的行装，当这霜降的时节飘然而至。'
  },
  {
    values: [12, 1, 2],
    color: 'primary',
    season: '冬',
    text: '北风起，雪飞扬，勤添衣裳感冒防；雾弥漫，天气寒，活动筋骨身体强。'
  }
]
const helloText = ref('')
const season = ref<TypedAny>(list[0])
const dateString = ref('')
const quotation = ref<QuotationRowType>({
  id: 0,
  content: '冲动，绝不是真正英雄的性格。',
  form: '名言大全',
  creator: 'sansko'
})
/**
 * @description date string
 */
const toDateString = () => {
  const today = dayjs()
  const dateStr = dayjs().format('YYYY-MM-DD hh:mm:ss')
  const week = today.day() // 星期
  const dayOfYear = today.dayOfYear()
  const month = today.month()
  const weeks = ['日', '一', '二', '三', '四', '五', '六']
  dateString.value = `<i class='font16'>${dateStr}</i> <i class='font12'>星期${weeks[week]}${dayOfYear}天</i>`
  const item = list.find((f) => f.values.includes(month))
  if (item) season.value = item
  hello()
}

/**
 * @description 简单问候
 */
const hello = () => {
  let hello
  const today = new Date()
  const hour = today.getHours()
  let userName = '管理员'
  if (userInfos) userName = `<span class='color-primary'>${userInfos.name}</span>。`
  if (hour < 7) hello = `凌晨好，${userName}`
  else if (hour < 10) hello = `早上好，${userName}开始您一天的工作吧。`
  else if (hour < 12) hello = `上午好，${userName}有些事情是不能等待的。`
  else if (hour < 13)
    hello = `中午好，${userName}当一个人一心一意做好事情的时候，他最终是必然会成功的。`
  else if (hour < 18) hello = `下午好，${userName}只要持之以恒，知识丰富了，终能发现其奥秘。`
  else if (hour < 20) hello = `傍晚好，${userName}泰山不让土壤，故能成其大。`
  else if (hour < 22) hello = `晚上好，${userName}不要太累，是时候下班了。`
  else hello = `夜深了，${userName}成大事者，争百年，不争一息。`

  if (helloText.value !== hello) helloText.value = hello
}

let timer: any

/**
 * @description 时间
 */
const initTimer = () => {
  toDateString()
  clearTimer()
  timer = setInterval(toDateString, 1000)
}

/**
 * @description 清除时间定时器
 */
const clearTimer = () => {
  if (timer) timer = null
}

const onFetch = async () => {
  // 一言句 https://api.vvhan.com/api/ian/rand?type=json
  // 情话 https://api.vvhan.com/api/text/love?type=json
  // 笑话 https://api.vvhan.com/api/text/joke?type=json

  const { data } = await request.get<QuotationRowType>(
    'https://api.vvhan.com/api/ian/rand?type=json'
  )

  quotation.value = data
}

onMounted(() => {
  initTimer()
  // 窗口隐藏停止定时器
  window.addEventListener('visibilitychange', () => {
    if (document.hidden) {
      clearTimer()
    } else {
      initTimer()
    }
  })
  onFetch()
})

onActivated(() => {
  initTimer()
})

onDeactivated(() => {
  clearTimer()
})
</script>

<template>
  <div class="home-header flex align-center">
    <el-avatar
      v-if="!mobile"
      shape="square"
      :size="60"
      fit="cover"
      :src="userInfos.avatar"
      alt="头像"
      class="flex-shrink"
    />
    <div class="ml10 flex-grow">
      <div class="flex align-center justify-between home-header-title pb5 mb5">
        <div class="flex align-center font16 flex-warp" v-html="helloText"></div>
        <div v-if="!mobile" class="flex align-center mr3">
          <div class="color-info mr5" v-html="dateString"></div>
<!--          <el-popover-->
<!--            :width="420"-->
<!--            placement="left-end"-->
<!--            popper-style="padding: 0;font-size:0;border-radius: 8px;box-sizing: border-box;overflow: hidden"-->
<!--          >-->
<!--            <template #reference>-->
<!--              <el-button :icon="Sunrise" circle></el-button>-->
<!--            </template>-->
<!--            <template #default>-->
<!--              <img src="https://api.vvhan.com/api/ipCard" alt="天气" class="w100" />-->
<!--            </template>-->
<!--          </el-popover>-->
        </div>
      </div>
      <div v-if="quotation.id" class="font14 flex align-center flex-warp color-info">
        <div class="joke-title vertical-middle pl8 mr5">
          <div class="ml5" style="line-height: 16px" v-html="quotation.content"></div>
        </div>
        <span>—— 《{{ quotation.form }}》{{ quotation.creator }}</span>
        <el-icon @click="onFetch" class="cursor-pointer ml10">
          <Refresh />
        </el-icon>
      </div>
      <div v-else-if="season" class="font14">
        <div class="d-flex align-end">
          <span :class="`color-${season.color}`" class="font18 font-bold">{{ season.season }}</span>
          <span class="color-info">: {{ season.text }}</span>
        </div>
      </div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.home-header-title {
  border-bottom: 0.5px solid var(--next-color-primary-lighter);
}

.joke-title {
  position: relative;

  &:before {
    position: absolute;
    left: 5px;
    top: 0;
    bottom: 0;
    content: '';
    height: 100%;
    width: 3px;
    background-color: var(--el-color-primary);
  }
}
</style>
